<template>
	<view class="content-header">
		<view class="top20"></view>
		<view class="userpro">
			<view class="intop flex-column">
				<view class="flex-row flex-content-between ones">
					<view class="text-left">头像</view>
					<view class="flex-row img-right flex-item-center">
						<image @tap="changeHeader" class="header-img" :src="from.avatar?from.avatar:`../../static/user/header.png`" mode="scaleToFill"></image>
						<image class="you-img" src="../../static/index/you.png" mode="scaleToFill"></image>
					</view>
				</view>
				<view class="flex-row flex-content-between ones">
					<view class="text-left">昵称</view>
					<view class="flex-row img-right flex-item-center">
						<view class="" @tap="changeNickname">{{from.nickname?from.nickname:"请填写昵称"}}</view>
						<image class="you-img" src="../../static/index/you.png" mode="scaleToFill"></image>
					</view>
				</view>
				<view class="flex-row flex-content-between ones">
					<view class="text-left">手机号</view>
					<view class="flex-row img-right flex-item-center">
						<view class="" @tap="changeMobile">{{from.mobile?from.mobile:"请输入手机号码"}}</view>
						<image class="you-img" src="../../static/index/you.png" mode="scaleToFill"></image>
					</view>
				</view>
				<view class="flex-row flex-content-center">
					<view class="btn">保存</view>
				</view>
			</view>
		</view>
		<uni-popup ref="changeTxt" type="center">
			<view class="change-class">
				<view class="change-class-top flex-column">
					<view class="changenickname">
						{{title}}
					</view>
					<view>
						<input v-model="inputvalue" :placeholder="placeholder" class="input"/>
					</view>
					<view class="tishi">{{prompt}}</view>
					<view class="flex-row flex-content-between topbtn">
						<view @tap="quxiao">取消</view>
						<view @tap="quern">确认</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				from:{
					nickname:"",
					mobile:"",
					avatar:"",
				},
				inputvalue:"",
				prompt:"八个字符以内，可由汉字、字母、数字组合",
				changeType:"nickname",
				placeholder:"请输入新昵称",
				title:"修改昵称"
			}
		},
		onLoad() {
			// var that = this
			// setTimeout(function(){
			// 	that.$refs.changeTxt.open()
			// },200)
		},
		methods:{
			//显示修改昵称弹框
			changeNickname(){
				this.changeType = 'nickname'
				this.title = '修改昵称'
				this.inputvalue = this.from.nickname;
				this.placeholder = "请输入新昵称"
				this.prompt = "八个字符以内，可由汉字、字母、数字组合"
				this.$refs.changeTxt.open()
			},
			changeMobile(){
				this.changeType = 'mobile'
				this.title = '修改手机'
				this.inputvalue = this.from.mobile;
				this.placeholder = "请输入新手机号"
				this.prompt = ""
				this.$refs.changeTxt.open()
			},
			//取消弹框
			quxiao(){
				this.$refs.changeTxt.close()
			},
			//确认按钮
			quern(){
				var value = this.inputvalue;
				if(this.changeType=='nickname'){
					this.from.nickname = value
				}else if(this.changeType=='mobile'){
					this.from.mobile = value
				}
				this.$refs.changeTxt.close()
			},
			//修改头像
			changeHeader(){
				this.$utils.UploadImages('http://www.baidu.com',function(res){
					console.log(res);
				})
				
			}
		}
	}
</script>

<style lang="scss">
	.topbtn{
		margin-top: 34rpx;
		padding-bottom: 50rpx;
		>view:nth-child(1){
			width: 220rpx;
			height: 70rpx;
			border-radius: 35rpx 35rpx 35rpx 35rpx;
			opacity: 1;
			border: 1px solid $default-button-color;
			font-size: 26rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: $default-button-color;
			text-align: center;
			line-height: 70rpx;
		}
		>view:nth-child(2){
			width: 220rpx;
			height: 70rpx;
			background: linear-gradient(90deg, $default-button-color 0%, $default-button-end-color 100%);
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			opacity: 1;
			font-size: 26rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: $default-button-foncolor;
			text-align: center;
			line-height: 70rpx;
		}
	}
	.tishi{
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		margin-top: 12rpx;
	}
	.input{
		width: 460rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
		border: 1rpx solid #D2D2D2;
		margin-top: 27rpx;
		margin-left: 2rpx;
		text-align: center;
	}
	.changenickname{
		font-size: 34rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		text-align: center;
	}
	.change-class-top{
		margin-top: 58rpx;
		margin-left: 59rpx;
		margin-right: 61rpx;
	}
	.btn{
		width: 400rpx;
		height: 90rpx;
		background: linear-gradient(90deg, $default-button-color 0%, $default-button-end-color 100%);
		border-radius: 40px 40px 40px 40px;
		opacity: 1;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: $default-button-foncolor;
		text-align: center;
		line-height: 90rpx;
		margin-top: 22rpx;
	}
	.change-class{
		width: 600rpx;
		// height: 412rpx;
		background: #FFFFFF;
		box-shadow: 0px 1px 9px 1px rgba(209,209,209,0.5);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
		border: 1px solid #E9E9E9;
	}
	.img-right{
		>view:nth-child(1){
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
		}
	}
	.ones{
		margin-bottom: 64rpx;
	}
	.text-left{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	.you-img{
		width: 14rpx;
		height: 24rpx;
		margin-left: 20rpx;
	}
	.header-img{
		width: 66rpx;
		height: 66rpx;
		border-radius: 33rpx;
	}
	.intop{
		padding-top: 55rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}
	.userpro{
		width: 750rpx;
		height: calc(100vh - 120rpx);
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0px 0px;
		opacity: 1;
	}
</style>